/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import { Row, Col, Card, Button, Radio } from "antd";
import React, { useState, useEffect } from "react";
import echarts from "./echartswrap.less";
import Echarts from "./Echarts";
import { connect } from "dva";
const EchartsWrap = props => {
  const { echartsData } = props;
  const [granularity, upGranularity] = useState("week");
  // CDN START
  const onChangeRadio = e => {
    const val = e.target.value;
    upGranularity(val);
  };
  useEffect(() => {
    const { dispatch } = props;
    dispatch({ type: "orderWorkTop/getWorkEchartsData" });
  }, []);
  const granularityDec = granularity === "week" ? "周" : "月";
  const currentData = echartsData[granularity] || {};

  return (
    <div className={echarts.container}>
      <Row type="flex" justify="center" align="middle">
        <Col span={20}>
          <div className={echarts.dec}>
            本{granularityDec}
            订单总数
            <span>{currentData["num"]}</span>本{granularityDec}
            已完成订单
            <span>{currentData["overNum"]}</span>
          </div>
        </Col>
        <Col span={4}>
          <Radio.Group onChange={onChangeRadio} defaultValue={granularity}>
            <Radio.Button value="week">本周</Radio.Button>
            <Radio.Button value="month">本月</Radio.Button>
          </Radio.Group>
        </Col>
      </Row>
      <Echarts data={currentData} />
    </div>
  );
};

export default connect(({ orderWorkTop }) => ({ echartsData: orderWorkTop.echartsData }))(
  EchartsWrap
);
